<template>
    <div style="background-color: bisque;">
        <h2>slot插槽</h2>
        <el-button type="primary">Primary</el-button>
        <SonSlot></SonSlot>
        <h3>插槽用于决定将所携带的内容，插入到子组件所制定的位置
            从而使模块分块，具有模块化的性质和更大的复用性
        </h3>
        <h1>1.默认插槽</h1>
        <h3>默认插槽使在组建模版中定义的，它允许父组件将内容传递给子组件

        </h3>
        <h3>使用方法：在子组件模版中使用slot标签，就可以为这个子组件开启一个插槽，
            然后再父组件模版中，将需要的内容放在子组件标签内部即可
        </h3>
        <SonSlot>
            <template v-slot:default>
                <div style="background-color:cadetblue">
                    我是父组件在子组件呈现的内容
                </div>
            </template>


        </SonSlot>
        <h1>2.具名插槽</h1>
        <h3>v-slot指令将内容定向到制定名字的插槽中，v-slot简写为#</h3>
        <SonSlot>
            <template v-slot:btn>
                <div>
                    我是谁？
                </div>
            </template>
            <template #msg>
                <div>
                    我是我！
                </div>
            </template>
           
        </SonSlot>
        <h1>3.作用域插槽</h1>
        <h3>在封装组件时，为预留的slot提供属性对应的值</h3>
        <SonSlot>
            <template #img="{scope}">
                <div>
                    <img :src="scope" alt="">

                </div>
            </template>
        </SonSlot>
      

    </div>
</template>
<script>
import SonSlot from './SonSlot.vue';

export default {
    components:{
        SonSlot,
    }
}
</script>
